<template>
    <div>
        <el-form ref="advertiFormRef" :model="advertiForm" :rules="advertiFormRules" label-width="120px" class="demo-ruleForm" status-icon>
            <el-form-item label="图片链接" prop="image">
                <el-input v-model="advertiForm.image" />
            </el-form-item>
            <el-form-item label="广告链接" prop="link">
                <el-input v-model="advertiForm.link" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm()">
                    添加
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script setup>
    import {ref,reactive } from 'vue'
    import axios from 'axios'
    import { ElMessage } from "element-plus";
    import { useRouter } from "vue-router";

    const router = useRouter()
    const advertiFormRef = ref()
    const advertiForm = reactive({
        image: '',
        link: ''
    })
    const advertiFormRules = reactive({
        image: [
            { required: true, message: '请输入图片链接', trigger: 'blur' }
        ],
        link: [
            { required: true, message: '请输入广告链接', trigger: 'blur' }
        ]
    })
    const submitForm = ()=>{
        advertiFormRef.value.validate(async (valid)=>{
            if (valid) {
                console.log('提交',advertiForm);
                const res = await axios.post("/adminapi/adverti/add",advertiForm)

                console.log(res)
                if (res.data.ActionType==="ok") {
                    ElMessage.success("添加成功")
                    router.push(`/AdvertiList`)
                }else{
                    if (res.error) {
                        ElMessage.error(res.error)
                    }else{
                        ElMessage.error("添加失败")
                    }
                    
                }
            }
        })
    }
</script>
